<template>
    <div class="tree">
        <div class="search_box">
            <div class="name">机构名称</div>
            <el-input class="ipt" type="text"
                placeholder="输入搜索关键字"
                v-model="searchKey"
                @keyup.enter.native="onSearch"
            ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
        </div>
        <el-tree
            class="scroll_bar"
            :style="{height: treeHeight}"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
        >
            <template slot-scope="{ node }">
                <span :title="node.label">{{node.label}}</span>
            </template>
        </el-tree>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getChildrenOrg } from '@/api/base/system'
import { debounce } from '@/utils/common'
export default {
    data () {
        return {
            searchKey: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'orgName'
            },
            screenWidth: 0,
            screenHeight: 0,
            orgList: [],
        }
    },
    computed: {
        ...mapState(['userInfo']),
        treeHeight () {
            return (this.screenHeight - 125) + 'px'
        },
    },
    created () {
        this.getTreeData()
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    methods: {
        async getTreeData (orgName = '') {
            const orgInfo = { ...this.userInfo.orgInfo }
            const son = await getChildrenOrg({ orgId: orgInfo.orgId, orgName: orgName })
            this.orgList = son.code ? [] : son
            orgInfo.children = son
            this.treeData = [ orgInfo ]
        },
        handleNodeClick ({ orgId, orgName }) {
            this.$emit('select', {
                orgId,
                orgName
            })
        },
        onSearch (e) {
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            this.serchOrg(searchKey)
        },
        serchOrg (key) {
            key = key.trim()
            const orgfilterList = this.orgList.filter(item=>{
                return (item.orgName.includes(key))
            })
            const orgInfo = { ...this.userInfo.orgInfo }
            orgInfo.children = orgfilterList
            this.treeData = [ orgInfo ]
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        listConversionTree (arr, parentId) {
            const tree = []
            let temp
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].parentId == parentId) {
                    const obj = arr[i]
                    temp = this.listConversionTree(arr, arr[i].orgId)
                    if (temp.length > 0) {
                        obj.children = temp
                    }else {
                        obj.children = []
                    }
                    tree.push(obj)
                }
            }
            return tree
        },
    }
}
</script>

<style lang="scss" scoped>
    .tree{
        .search_box {
            position: fixed; left: 11px; top: 0; z-index: 2; padding: 10px 0 0; width: 365px; flex-direction: column; background: #fff;
        }
        .name {
            margin: 0 0 15px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            background-color: rgb(224, 231, 249);
        }
        .el-tree{
            overflow-y: auto;
        }
        ::v-deep.el-tree-node>.el-tree-node__children {
            width: 800px;
            &::-webkit-scrollbar {
                height: 8px;
            }
            &:hover{
                &::-webkit-scrollbar-thumb {
                    background: rgba(204, 204, 204, 0.8);
                    &:hover{
                        background: rgba(204, 204, 204, 1);
                    }
                }
            }
        }
    }
</style>